//分页列表页面的js

let index = layer.load(0,{shade:[.5,'#ccc']});


$.ajax({
    url:'../server/list.php',
    data: { pid: 991 },
    dataType:'json',
    success(res){
        // console.log(res);
       
        let{data} = res;
        // console.log(data);
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage //获取分页组件
            laypage.render({
              elem: 'page',
              count: data.length, // 所有的数据        
              layout: ['prev', 'page', 'next', 'limit', 'first', 'skip'], // 分页组件的排版,
              limits: [5, 10, 15, 20, 25], // 每页显示的可选数量
              limit: 25, //默认每页显示的条数            
              prev: '上一页',
              next: '下一页',
              first: '首页',
              last: '尾页',
              jump: function (obj) { // 数据显示及跳转分页的函数
                // 此函数中obj就是当前分页的所有参对象          
                let str = function () { // 函数自调用，然后返回拼接好的页面字符串
                  var arr = [];
                  let start = obj.curr * obj.limit - obj.limit;
                  var thisData = data.concat().splice(start, obj.limit); // 得到分页显示的数据数组
                  arr = thisData.map((v, i) => 
                //   console.log(v.imgpath)
                  `
                  <li id='${v.id}'><a href=""><img src="${v.imgpath.split('=====')[0]}"><p>${v.name}</p></a></li>
                  `);
                  return arr.join('');
                }();
                $('#list').html(str);
                $('#list1').html(str);
                // 数据渲染完毕，关闭加载层
                layer.close(index);
              }
            });
          })
    }
})

// 出行  穿戴
$.ajax({
    url:'../server/list.php',
    data: { pid: 981 },
    dataType:'json',
    success(res){
        // console.log(res);
       
        let{data} = res;
        // console.log(data);
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage //获取分页组件
            laypage.render({
              elem: 'page',
              count: data.length, // 所有的数据        
              layout: ['prev', 'page', 'next', 'limit', 'first', 'skip'], // 分页组件的排版,
              limits: [5, 10, 15, 20, 25], // 每页显示的可选数量
              limit: 25, //默认每页显示的条数            
              prev: '上一页',
              next: '下一页',
              first: '首页',
              last: '尾页',
              jump: function (obj) { // 数据显示及跳转分页的函数
                // 此函数中obj就是当前分页的所有参对象          
                let str = function () { // 函数自调用，然后返回拼接好的页面字符串
                  var arr = [];
                  let start = obj.curr * obj.limit - obj.limit;
                  var thisData = data.concat().splice(start, obj.limit); // 得到分页显示的数据数组
                  arr = thisData.map((v, i) => 
                //   console.log(v.imgpath)
                  `
                  <li id='${v.id}'><a href=""><img src="${v.imgpath}"><p>${v.name}</p></a></li>
                  `);
                  return arr.join('');
                }();
                $('#list1').html(str);
                // 数据渲染完毕，关闭加载层
                layer.close(index);
              }
            });
          })
    }
})


// 家电
$.ajax({
    url:'../server/list.php',
    data: { pid: 971 },
    dataType:'json',
    success(res){
        // console.log(res);
       
        let{data} = res;
        // console.log(data);
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage //获取分页组件
            laypage.render({
              elem: 'page',
              count: data.length, // 所有的数据        
              layout: ['prev', 'page', 'next', 'limit', 'first', 'skip'], // 分页组件的排版,
              limits: [5, 10, 15, 20, 25], // 每页显示的可选数量
              limit: 25, //默认每页显示的条数            
              prev: '上一页',
              next: '下一页',
              first: '首页',
              last: '尾页',
              jump: function (obj) { // 数据显示及跳转分页的函数
                // 此函数中obj就是当前分页的所有参对象          
                let str = function () { // 函数自调用，然后返回拼接好的页面字符串
                  var arr = [];
                  let start = obj.curr * obj.limit - obj.limit;
                  var thisData = data.concat().splice(start, obj.limit); // 得到分页显示的数据数组
                  arr = thisData.map((v, i) => 
                //   console.log(v.imgpath)
                  `
                  <li id='${v.id}'><a href=""><img src="${v.imgpath}"><p>${v.name}</p></a></li>
                  `);
                  return arr.join('');
                }();
                $('#list2').html(str);
                // 数据渲染完毕，关闭加载层
                layer.close(index);
              }
            });
          })
    }
})


// 使用事件委托 给查看详情点击事件
$('ul').on('click','li',function(){
    // 获取之前给元素标签存储的商品id  
    let id = this.getAttribute('id');
    // console.log(id);
    //  将商品id存储到sessionStorage
    sessionStorage.setItem('id',id);
    // // // 跳转至详情页面
    location.href = 'details.html'
    
  })